<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/Style.css">
    <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/reg.css">
    <script src="bootstrap-3.3.7-dist/js/JQuery.js" type="text/javascript" charset="utf-8"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.1.9.min.js"></script>
    <script>

        function checkUserName() {
            var flag;
            var userName = $("#userName").val();
            if (userName == null || userName == "null" || userName == "") {
                flag = false;
                $("#error_msg").html("用户名不能为空");
                return;
            } else {
                var reg = /^[0-9a-zA-Z_]{8,}$/;
                if (!reg.test(userName)) {
                    flag = false;
                    $("#error_msg").html("用户名至少8位字母数字下划线均可");
                    return;
                } else {
                    $.get("user?method=checkUserName", {userName: userName}, function (data) {
                        if (!data.flag) {
                            flag = false;
                            $("#error_msg").html("用户名重复，请检查");
                        } else {
                            flag = true;
                        }
                    });
                }
            }
            return flag;
        }

        function checkPassWord() {
            var flag = false;
            var password = $("#password").val();
            if (password == null || password == "null" || password == "") {
                flag = false;
                $("#error_msg").html("密码不能为空");
                return;
            } else {
                var reg = /([a-zA-Z0-9!@#$%^&*()_?<>{}]){6,18}/;
                if (!reg.test(password)) {
                    flag = false;
                    $("#error_msg").html("密码6-18位包含字母数组下划线");
                    return;
                } else {
                    flag = true;
                }
            }
            return flag;
        }

        function checkTwoPassWord() {
            var flag = false;
            var twopassword = $("#twopassword").val();
            if (twopassword == null || twopassword == "null" || twopassword == "") {
                flag = false;
                $("#error_msg").html("确认密码不能为空");
                return;
            } else {
                var password = $("#password").val();
                if (twopassword !== password) {
                    flag = false;
                    $("#error_msg").html("两次密码不一致，请检查");
                    return;
                } else {
                    flag = true;
                }
            }
            return flag;
        }

        function checkNickName() {
            var flag;
            var nickname = $("#nickname").val();
            if (nickname == null || nickname == "null" || nickname == "") {
                flag = false;
                $("#error_msg").html("昵称不能为空");
                return;
            } else {
                flag=true;
            }
            return flag;
        }


        function checkEmail() {
            var flag;
            var email = $("#email").val();
            if (email == null || email == "null" || email == "") {
                flag = false;
                $("#error_msg").html("邮箱不能为空");
                return;
            } else {
                var reg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
                if (!reg.test(email)) {
                    flag = false;
                    $("#error_msg").html("您输入的邮箱，不符合规范，请重新输入");
                    return;
                } else {
                    $.get("user?method=checkEmail", {email: email}, function (data) {
                        if (!data.flag) {
                            flag = false;
                            $("#error_msg").html("邮箱已注册过，请检查");
                        } else {
                            flag = true;
                        }
                    });
                }
            }
            return flag;
        }

        function checkCode() {
            var flag = false;
            var yzm = $("#yzm").val();
            if (yzm == null || yzm == "null" || yzm == "" || yzm.length <= 0) {
                flag = false;
                $("#error_msg").html("验证码不能为空");
                return;
            } else {
                flag = true;
            }
            return flag;
        }

        $(function () {
            //设置点击事件
            $(".zhuCe").click(function () {
                if (checkPassWord() && checkTwoPassWord() && checkCode() && checkNickName()) {
                    $.post("user?method=regist", $("#reg").serialize(), function (data) {
                        if (data.flag) {
                            alert("激活邮件已发送，请到邮箱查看");
                        } else {
                            alert("注册失败,请检查填写的信息信息");
                            $("#error_msg").html(data.errorMsg);
                        }
                    });
                }
            });
            $("#userName").blur(checkUserName);
            $("#password").blur(checkPassWord);
            $("#twopassword").blur(checkTwoPassWord);
            $("#nickname").blur(checkNickName);
            $("#email").blur(checkEmail);
            $("#yzm").blur(checkCode);
        });
    </script>
</head>
<body background="images/bg.jpg">
<h1>欢迎注册个人笔记系统</h1>
<div class="reg" style="margin-top: 100px;">
    <div id="error_msg" style="color: red; text-align: center;"></div>
    <form method="post" id="reg" action="#">
        <div class="form-group">
            <label for="userName">账号</label>
            <input type="text" class="form-control" name="userName" id="userName" placeholder="请输入账号">
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" class="form-control" name="password" id="password" placeholder="请输入密码">
        </div>
        <div class="form-group">
            <label for="password">确认密码</label>
            <input type="password" class="form-control" id="twopassword" placeholder="请输入密码">
        </div>
        <div class="form-group">
            <label for="nickname">昵称</label>
            <input type="text" class="form-control" name="nickname" id="nickname" placeholder="请输入昵称">
        </div>
        <div class="form-group">
            <label for="email">邮箱</label>
            <input type="email" class="form-control" name="email" id="email" placeholder="请输入邮箱">
        </div>
        <label for="yzm">验证码</label>
        <div class="form-group">
            <input style="width: 200px; display: inline;" type="text" class="form-control"
                   name="yzm" id="yzm" placeholder="请输入验证码">
            <img id="img"
                 style="float: right; margin-bottom: 40px; display: inline; margin-left: 40px; width: 150px; height: 35px;"
                 src="checkCode?method=createCode" onclick="changeCheckCode(this)">
            <script>
                function changeCheckCode() {
                    $("#img").attr("src", "checkCode?method=createCode&time=" + new Date().getTime());
                }
            </script>
        </div>
        <button id="zhuCe" type="button" class="btn btn-default zhuCe">注册</button>
    </form>
</div>
</body>
</html>
